<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: brown;
			}

			li {
				float: left;
			}

			li a {
				display: block;
				color: white;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
			}

			li a:hover {
				background-color: #111;
			}

			.tip {
				display: none;
				background-color: #111111;
				color: white;
			}

			li:active span {
				display: block;
				position: absolute;
			}
			dl{
				display: none;
				background-color: #111111;
				color: white;
			}
			li:hover dl{
				display: block;
				position: absolute;
			}
			dd{
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>
	<body>

		<ul>
			<li><a class="active" href="#home">主页</a></li>
			<li><a href="#news">新闻</a>
				<dl>
					<!-- 二级菜单 -->
					<dd>体育新闻</dd>
					<dd>影视新闻</dd>
					<dd>军事新闻</dd>
				</dl>
			</li>
			<li><a href="#contact">联系</a></li>
			<li><a href="#about">关于</a>
				<span class="tip">提示文本</span>
			</li>
		</ul>
	</body>
</html>
